<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="IT技术课程网站">
		<meta name="keywords" content="IT技术课程网站">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<title>视频详情页</title>
		<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
		<base th:href="@{/}">
		<!--[if lt IE 9]>
		  <script src="js/html5shiv.min.js"></script>
		  <script src="js/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap3.min.css">
		<link rel="stylesheet" type="text/css" href="css/flat-ui.css" />
		<link rel="stylesheet" type="text/css" href="css/videoDetail.css" />
		<script src="js/jquery-3.3.1.min.js"></script>
		<!-- <script src="js/video.js"></script> -->
		<script src="js/flat-ui.js"></script>
		<script src="js/application.js"></script>
	</head>

	<body>
		<nav class="navbar navbar-inverse navbar-lg navbar-expand-lg" role="navigation">
			<a class="navbar-brand" href="indexMain.html">
				<img src="images/ITx32.png" style="width: auto;height: 25px;">
			</a>
			<a class="navbar-brand" style="padding-left: 0;" href="indexMain.html">IT技术课程网站</a>
			<div class="collapse navbar-collapse" id="navbar-collapse-01">
				<ul class="nav navbar-nav mr-auto">
					<li><a href="indexMain.html">首页</a></li>
					<li class="active"><a href="videoMain.html">视频课程</a></li>
					<li><a href="blogMain.html">博客文章</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right mr-auto">
					<li><a th:text="${session.Account.username}" href="userInfo.html" id="username-menu">用户名</a></li>
				</ul>
				<form class="navbar-form form-inline my-2 my-lg-0" action="searchInputVideo" role="search" style="margin: 0px;">
					<div class="form-group" style="margin-left: 20px;">
						<div class="input-group">
							<input class="form-control" id="navbarInput-01" name="searchText" style="width: 250px;" type="search" placeholder="输入搜索课程" required>
							<span class="input-group-btn">
								<button type="submit" class="btn"><span class="fui-search"></span></button>
							</span>
						</div>
					</div>
				</form>
			</div><!-- /.navbar-collapse -->
		</nav><!-- /navbar -->
		<div id="row video-container">
			<div class="col-md-8 col-md-offset-2 ">
				<h5 th:text="${video.vtitle}">视频标题</h5>
				<span style="margin-left: 10px">最后发布于</span>
				<span th:text="${#dates.format(video.vtime, 'yyyy-MM-dd')}">发布时间</span>
				<hr>
				<video
				  id="my-player"
				  class="video-js"
				  controls
				  preload="auto"
				  th:poster="${video.vcoverurl}"
				  data-setup='{}'>
				  <source th:src="${video.vurl}" type="video/mp4" />
				  <p class="vjs-no-js">
					To view this video please enable JavaScript, and consider upgrading to a
					web browser that
					<a href="http://videojs.com/html5-video-support/" target="_blank">
					  supports HTML5 video
					</a>
				  </p>
				</video>
				<br>
				<div class="video-desc">
					<h6>视频详情</h6>
					<hr >
					<p th:text="${video.vdesc}">详情</p>
				</div>
				<div class="write-comment">
					<form method="post">
						<input type="hidden" th:value="${video.id}" id="v_id" name="v_id">
						<input type="hidden" th:value="${session.Account.id}" id="u_id" name="u_id">
						<textarea rows="5" cols="60" id="cmcontent" name="cmcontent" placeholder="说出你的感悟吧" required></textarea>
						<input class="btn btn-info" id="btn_sendComment" type="button" value="发表评论"/>
					</form>
				</div>
				<div class="video-comment" id="video_comment" th:fragment="video_comment">
					<h6>评论区</h6>
					<hr >
					<ul>
						<li th:each="comments:${commentList}">
							<span th:text="${comments.username}">用户</span>
							<span th:text="${#dates.format(comments.cmtime, 'yyyy-MM-dd')}" style="font-size: 12px;font-weight: 300;color: #666">发布时间</span>
							<p th:text="${comments.cmcontent}" style="font-size: 16px;font-weight: 300;color: #666">评论内容</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script>
			//异步加载评论
			$('#btn_sendComment').on("click",function () {
				var url = 'addVideoComment';
				var v_id = $("#v_id").val();
				var u_id = $("#u_id").val();
				var cmcontent = $("#cmcontent").val().trim();
				if (cmcontent == ""){
					return false;
				}
				var form_addCommnet = {
					v_id:v_id,
					u_id:u_id,
					cmcontent:cmcontent
				};

				/*
				用ajax的写法
				$.ajax({
					url: url,
					type: 'post',
					data: form_addCommnet,
					success: function (data) {
						$('#video_comment').html(data);
					}
				});
				*/

				$('#video_comment').load(
						url,//请求路径
						form_addCommnet,//请求的数据
						function(response,status){//回调函数
							//response返回异步的HTML内容
							//status成功返回success
							if (status == "success"){
								$("#cmcontent").val("");
							}
				})

			});

		</script>
		

	</body>

</html>
